<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单管理</title>
    <link rel="stylesheet" href="/src/dep/element-ui/2.13.2/index.css">
    <link rel="stylesheet/less" href="/src/css/xiaotao-ui.less">
    <link rel="stylesheet" href="/src/css/base.css">
    <script src="/src/dep/js/vue.js"></script>
    <script src="/src/dep/element-ui/2.13.2/index.js"></script>
    <script src="/src/js/xiaotao-ui.js"></script>
    <script src="/src/dep/js/less.min.js"></script>
    <script src="/src/js/base.js"></script>
    <style>
        body,html{
            background: none;
        }
        .playlist,.musiclist{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .playlist li{
            padding: 5px 10px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .playlist li.selected{
            background-color: rgb(241, 251, 255);
            color: cornflowerblue;
        }
        .musiclist .item-row{
            display: flex;
            align-items: center;
            height: 40px;
        }
        .music-icon{
            background-image: url(/src/imgs/icon/add.png);
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: 16px 16px;
            margin-right: 10px;
            background-repeat: no-repeat;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <xt-card title="歌单" style="width: 280px;margin: 0;display: inline-block;" contentStyle="padding:0">
            <ul class="playlist">
                <li :class="{selected:selected_id == list.id}" @click="selected_id = selected_id == list.id ? -1 : list.id" v-for="(list,key) in playlist">{{list.name}}</li>
            </ul>
        </xt-card>
        <xt-input v-model="search_key" placeholder="搜索歌曲"></xt-input>
        <xt-btn @click="search(search_key,1)" :style="{backgroundColor:XTColor.primary,color:'white'}">搜索</xt-btn>
        <div style="width: 80%;margin: 0 auto;background-color: white;border-radius: 5px;padding: 10px;">
            <el-pagination layout="prev, pager, next" @current-change="pagechange" :page-size="pagesize" :total="search_res.total"></el-pagination>
            <xt-card title="搜索结果" style="width: 98%;">
                <ul class="musiclist">
                    <li class="item-row" v-for="item in search_res.data">
                        <span @click="addToList(item)" class="music-icon"></span>
                        <span style="
                        word-break: break-all;
                        flex-grow: 1;
                        flex-basis: 0;">{{item.name}}</span>
                    </li>
                </ul>
            </xt-card>
        </div>
    </div>
    <script>
        app = new Vue({
            el:"#app",
            data:{
                playlist:[],
                selected_id:0,
                search_res:[],
                search_key:'',
                search_key_lock:'',
                pagesize:15
            },created(){
                this.getList()
            },methods: {
                getList() {
                    aoej.load()
                    majax("post", '/api/Media/getMyList',{
                        success:e=>{
                            aoej.finish()
                            this.playlist = e.data.data
                        }
                    })
                },search(key, page){
                    this.search_key_lock = key
                    aoej.load()
                    if ( page == undefined || page < 0 ){
                        page = 1
                    }
                    majax("post", '/api/Resource/search',{
                        data:{
                            'path':'/影视作品/音乐仓库',
                            'key':key,
                            'page':page
                        },
                        success:e=>{
                            aoej.finish()
                            this.search_res = e.data.data
                        }
                    })
                },pagechange(page){
                    this.search(this.search_key_lock, page)
                },addToList(item){
                    if ( this.selected_id <= 0 ){
                        this.alert("错误","未选择歌单")
                        return
                    }
                    majax('post', '/api/Media/addToList',{
                        data:{
                            list_id:this.selected_id,
                            name:item.name,
                            path:item.path
                        },success:e=>{
                            if (e.status == 200 && e.data.status == 1){
                                this.alert("提示","添加成功")
                            }else{
                                this.alert("错误","http status:"+e.status+"<br>API code:"+e.data.status+"<br>API msg:"+e.data.msg)
                            }
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

